<script lang="js">
import Person from './../core/index.js'
import MyNav from './../components/MyNav.vue'
import MySilder from '@/components/MySilder.vue'
export default {
    components:{
        MyNav,MySilder
    },
    data() {
        return {
            msg: 'Hello Vue!'
        }
    },
    mounted() {
        console.log('mounted')
        this.hello()
        // let myNav = this.$refs.myNav;
        // myNav.add();
        // console.log('myNav', );
    },
    methods: {
        hello() {
            let p1 = new Person('John', 25);
            console.log(p1.name); // John
            console.log(p1.title); // 25
        }
    },
}
let _obj = { name: 'John', age: 25, arr: [1, 2, 3] }
// --vue2数据响应式实现原理

function defineReactive(target, key, value) {
    observe(value);
    Object.defineProperty(target, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            console.log('get', key);
            return value;
        },
        set: function reactiveSetter(newVal) {
            console.log('vue2 set', key);
            if (newVal === value) {
                return;
            }
            observe(newVal);
            value = newVal;
        }
    });
}
function observe(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    for (let key in obj) {
        defineReactive(obj, key, obj[key]);
    }
}
//  console.log(_obj.age); // {name: "John", age: 25}
_obj.ak = '激情'
_obj.name = 'Tom';

observe(_obj);
// console.log(_obj); // {name: "John", age: 25}
let handler = {
    get(target, key) {
        let temp=target[key];
        if(typeof temp === 'object' && temp !== null){
            return new Proxy(temp, handler);
        }
        return temp;
    },
    set(target, key, value) {
        console.log('vue3 set', key, value, target[key]);
        target[key] = value; return true;
    }
}
// vue3数据响应式实现原理
function reactive(target) {
    return new Proxy(target, handler)
}
const proxy = reactive(_obj);
console.log(proxy); // John
proxy.akl = 'Tom009';
console.log(proxy.akl); // Tom
console.log(proxy.arr); // Tom
</script>
<template>
  <div class="main">
    <header>
      <MyNav title="首页导航"></MyNav>
    </header>
    <div></div>
    <div class="dflex">
      <aside>
        <MySilder></MySilder>
      </aside>
      <div class="content">
        <h2>主体区域</h2>
        <h3>{{ msg }}</h3>
        <ElIndex></ElIndex>
      </div>
    </div>
  </div>
</template>
